<div class="hero hero-bg text-center">

  <div class="display4 fg-purple"><span class="reduce-3 enlarge-3-md">Moonlight</span></div>

  <h4 class="text-center fg-purple text-upper text-light">Welcome in your app</h4>
</div>
<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="cell-md-10 cell-xl-8 pr-1-sx pl-1-sx pr-5-md pl-5-md offset-md-1 offset-xl-2">
      <div class="feature-table row mt-10">
        <div class="offset-md-4 cell-md-4">
          <div class="info-panel rounded no-overflow shadow-3">
            <div class="info-panel-header bg-steel fg-white">Welcome</div>
            <div class="info-panel-content">
              <div class="mx-10 my-6"><span class="mif-rocket mif-8x fg-steel"></span></div>
              <span class="text-leader2">Welcome to see Moonlight</span>
            </div>
            <div class="info-panel-footer">
              <a routerLink="/blog" class="button large outline secondary rounded">Get started</a>
            </div>
          </div>
        </div>
      </div>
    </div>
